<template>
    <div>
        <h4 class="h4">云音乐特色榜</h4>
        <ul>
            <li @click="btnOK(k.id)" v-for="k in special" :key="k.id" :class="{li:true ,active:k.id===i}">
                <img class="img" :src="k.coverImgUrl" alt="">
                <span class="span">
                    <a href="javascript:;" class="aa">{{k.name}}</a>
                    <p class="text">{{k.updateFrequency}}</p>
                </span>
            </li>
        </ul>

        <h4 class="h4" style="margin-top:20px">全球媒体榜</h4>
        <ul>
            <li  @click="btnOK(k.id)" v-for="k in media" :key="k.id" :class="{li:true ,active:k.id===i}">
                <img class="img" :src="k.coverImgUrl" alt="">
                <span class="span">
                    <a href="javascript:;" class="aa">{{k.name}}</a>
                    <p class="text">{{k.updateFrequency}}</p>
                </span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  data () {
    return {
      i: parseInt(this.$route.params.id) || 19723756
    }
  },
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  computed: {
    special () {
      return this.list.filter((v, i) => i < 4)
    },
    media () {
      return this.list.filter((v, i) => i > 3)
    }
  },
  methods: {
    btnOK (id) {
      this.i = id
      this.$emit('btn', id)
    }
  }
}
</script>

<style scoped>

.h4{
    padding-left: 21px;
    margin-top: 50px;
    height: 27px;
}

ul{
    margin-top: 8px;
}
.li{
    padding-left: 25px;
    padding-top: 11px;
    display: flex;
    width: 100%;
    height: 62px;
}
.img{
    width: 40px;
    height: 40px;
    vertical-align: middle;
}
.span{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 40px;
    padding-left: 15px;
}
.aa{
    font-size: 12px;
    color: #000;
}
.text{
    font-size: 12px;
    color: #999;
}
.active{
    background-color: #e6e6e6;
}
</style>
